/* 设置变量 */
/* :root {
  --whiteColor: #fff;
} */
@property --size-y {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
@property --size-x {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}
@property --transition-time {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

body {
  /* margin: 0 */
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.img {
  width: 400px;
  height: 200px;
  background: url(./001.png);
  -webkit-mask: paint(maskChange);
  --size-y: 10;
  --size-x: 20;
  --transition-time: 1;
  transition: --transition-time 0.5s linear;  /* 对 --transition-time 这个变量进行过渡 */
}
.img-hide {
  --transition-time: 0;
}
.img-show {
  --transition-time: 1;
}